<template>
  <div class="search-box">
    <div class="search-top clearfix">
      <div class="search-input fl">
        <span>
          <input type="text" :placeholder="placeholder" v-model="text" />
        </span>
        <el-button class="search-btn" type="primary" icon="el-icon-search" @click="goSearch">
        </el-button>
      </div>
      <div class="hot-keywords fl" v-if="this.$route.name != 'Agent'">
        <span class="fl">热搜：</span>
        <ul>
          <li class="one-txt-cut" v-for="(item, index) in hotKeywords" :key="index" @click="inSearch(item.word)">
            {{ item.word }}
          </li>
        </ul>
      </div>
      <div class="find-house fr">
        <i class="el-icon-location"></i>
        <a href="JavaScript:;">地图找房</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  props:['searchText'],
  data() {
    return {
      text: '',
      // 热搜关键词
      hotKeywords: [
        { word: "锦绣新天地" },
        { word: "雅居乐城南源著" },
        { word: "尚东尚筑" },
        { word: "越秀·可逸江畔" },
      ],
      placeholder: '',
    }
  },
  created(){
    this.text = this.searchText;
  },
  mounted() {
    console.log(this.$route.name)
    switch (this.$route.name) {
      case 'Second-handHouse':
        this.placeholder = '搜索房源特征、地区等';
        break;
      case 'Estate':
        this.placeholder = '搜索小区名称';
        break;
      case 'Agent':
        this.placeholder = '搜索经纪人名称';
        break;
      case 'Estate':
    }
  },
  methods: {
    inSearch(i) {
      this.text = i;
    },
    goSearch() {
      this.$emit('search', this.text)
    }
  }
};
</script>

<style lang="less" scoped>
@import "../assets/less/variable.less";
.search-box {
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}

.search-input {
  > span {
    display: inline-block;
    border: 1px solid #ccc;
    border-right: none;
  }

  input {
    border: none;
    outline: none;
    height: 18px;
    width: 500px;
    padding: 10px;
  }

  button {
    height: 40px;
    vertical-align: middle;
    border-radius: 0;
    background-color: @theme;
    border-color: @theme;
  }
}

.hot-keywords {
  width: 400px;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;

  ul > li {
    max-width: 90px;
    float: left;
    font-size: 13px;
    margin-right: 10px;
    cursor: pointer;

    &:hover {
      color: @theme;
    }
  }
}

.find-house {
  height: 40px;
  line-height: 40px;
  color: @theme;

  i {
    font-size: 20px;
    margin-right: 5px;
  }

  a {
    color: none;

    &:hover {
      color: @theme;
    }
  }
}
</style>